<template>
  <div class="manage" style="height: 90vh">
    <div class="manage-header">
      <el-dialog :title="操作" :visible.sync="dialogVisible" width="50%"
                 :before-close="closeDialog">
        <!-- 表单Form -->
        <!-- ref=form:为了通过this.$refs调用组件的方法 -->
        <el-form :inline="true" :model="this.vid"  ref="form" label-width="80px">
          <!-- 每一项表单域:el-form-item -->
       <el-button @click="pass(vid)">通过</el-button>
       <el-button @click="nopass(vid)">不通过</el-button>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 新增按钮 -->
      <el-button type="primary" @click="handlecreate">告警</el-button>
      <!-- 对话框:点击新增或编辑才会弹出表单 -->
      <!-- :before-close="closeDialog" 点击关闭的x之前要做的事情 -->
      <!-- 搜索框 -->
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="searchForm.sername" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="common-table">
      <!-- 用户数据Table -->
      <div id="pro_form" style="position: relative;width: 100%;;">
        <div style="position: relative;">
          <el-row>
            <!--就改这里一行-->
            <el-col :span="5" v-for="(project) in allprojects" :key="project.id" :offset="1" style="margin-bottom:40px">
              <el-card :body-style="{ padding: '0px', height:'360px'}" shadow="hover" style="width: 300px;height: 320px;">
                <div style="padding: 6px;height: 310px;">
                  <div>
                    <div><font size="5">违规视频ID：{{project.sername}}</font></div>
                    <div style="position: relative;top: 15px;"> 违规内容:{{project.name}}</div>
                  </div>
                  <div style="position: relative;top: 30px;text-align: center">
                    <img :src="project.path" class="image" style="height: 150px" >

                    <div style="position: relative;top: 10px;left: 66px;"><i class="el-icon-time"></i>{{project.time}}</div>
                  </div>
                  <div style="position: relative;top: 45px;">
                    &nbsp;&nbsp;<i class="el-icon-warning"></i><span>{{project.type}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-button type="text"><font size="4" @click="show(project)">查看</font></el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
      <!-- 分页 -->
      <div class="pager">
        <el-pagination layout="prev, pager, next" :total="total" @current-change="currentChange">
        </el-pagination>
      </div>
    </div>


</template>

<script>
import {checkno, checkok, getwarnList,delw} from "@/api";

export default {
  data() {
    return {
      // 表单绑定的数据
      allprojects:[
        // {
        //   id:'123',
        //   name:'pname',
        //   path:'pcname',
        //   time:'2018-4-9 11:11:11',
        //   type:10
        // }
      ],
      // 表单验证规则
      // 表单是否打开
      // 分页的对象
      pageData: {
        pageNum: 1,
        pageSize: 8
      },

      // 分页页数
      total: 0,
      vid:{},
      dialogVisible:false,
      // 搜索框表单
      searchForm: {
        sername: ''
      }
    }
  },
  methods: {
    delw(warn){
      delw(warn)
    },
    pass(row){
      this.dialogVisible=false
      checkok({params:{id:row.sername}}).then(res=>{
        if(res.data.code==200){
          this.$message({
                message: '审核成功',
                type: 'success'
              },
          this.delw(row),
          console.log(row,"wwwwww")
          );
          this.getList()
        }else{
          this.$message({
            message: '审核失败',
            type: 'error'
          });
        }

      })

    },
    nopass(row){
      this.dialogVisible=false
      console.log("nppppp")
      checkno({params:{id:row.sername}}).then(res=>{
        if(res.data.code==200){
          this.$message({
                message: '审核成功',
                type: 'success'
              }
          );
          this.getList()
        }else{
          this.$message({
            message: '审核失败',
            type: 'error'
          });
        }
      })
      this.dialogVisible=false
    },
    closeDialog(){
      this.vid={}
      this.dialogVisible=false
    },
    show(val){
      this.dialogVisible=true
      this.vid=val
    },
    // 获取列表数据
    getList() {
      // 由接口文档知传入一个对象:要返回的是当前页面数据和搜索到的数据的交集
      getwarnList({params: { ...this.pageData ,...this.searchForm} }).then(data => {
        this.allprojects = data.data.data.list
        this.total = data.data.data.total|| 0

      })
    },
    // 表单提交

    // 关闭对话框

    // 编辑按钮
    // 删除按钮

    // 新建按钮

    // 打开表单

    // 改变页码
    currentChange(val) {
      this.pageData.pageNum = val
      this.getList()
    },
    // 搜索
    search() {
      this.getList()
    }
  },
  mounted() {
    this.getList()
  }
}
</script>

<style lang="less" scoped>
.manage {
  height: 100%;

  .manage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .common-table {
    height: 90%;
    position: relative;

    .pager {
      position: absolute;
      right:20px;
      bottom: 0;
    }
  }








}
</style>